刚接触前端开发的小伙伴或许不熟悉prop属性,但是有react框架经验的小伙伴肯定很熟悉它,我一直在用props属性,但到今天我才有时间整理prop属性的用法。废话不多直入主题。
1.prop的定义:
在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。
2.prop定义的数据类型
props: {
name: String, //字符串类型
type: {
validator: function(value) { //验证函数
// 这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].includes(value);
}
},
list: {
type: Array,//数组类型,也可以是Object
default: () => []
},
isVisible: { //Boolean类型
type: Boolean,
default: false
},
onChange: { //函数类型
type: Function,
default: () => {}
}
},
prop属性中可以定义属性的类型,也可以定义属性的初始值。如name:String,default:"vm",表示第一次加载name属性时其值为vm。prop属性中定义的属性也可以验证该属性,比如上面的type属性,其值必须是"success", "warning", "danger"中的任意一个,要是不是这是三个中的任意一个也可以显示,但是这时控制台会报错,所以要使用validator验证函数时要谨慎。这里的list定义的是一个数组,默认必须从一个工厂函数获取。isVisble定义的是一个boolean值,默认是default:false。onChange定义的是一个函数,这个函数在这里的意义是建立子组件向父组件传值的途径。
3.非prop特性
有时候父组件会向子组件传任意特性。比如现在有一个父组件Parent,一个子组件Child,这时候你要向子组件添加一个data-date-picker="activated" ,这时候你在Child组件中加inheritAttrs:false
inheritAttrs: false, //不继承父组件的特性
当你添加完这个属性后子组件将不会继承该属性。
很多时候inheritAttrs:false结合$attrs实例方法可以决定这些特性被赋予哪些元素。
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
<base-input
v-model="username"
required
placeholder="Enter your username"
></base-input>
这个例子中如果没有给组件base-input中的input使用v-bind绑定$attrs实例属性,在父组件中的placeholder属性就不会传递给子组件。
关于Prop属性欢迎各位道友指正补充。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。